<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>用户信息</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/statics/css/csspuls/index.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/statics/styles/common.css" />
    <link rel="stylesheet" href="${pageContext.request.contextPath}/statics/styles/icon/iconfont.css" />
    <link rel="stylesheet" href="${pageContext.request.contextPath}/statics/css/animate.min.css">
    <style>
        .userInfo{
            width:400px ;
            height:500px;
            margin-top:20px;
            margin-left:40px;
        }
        .userUpdate{
            width:700px ;
            height:500px;
            margin-top:20px;
            margin-left:40px;
        }
        .box-card {
         border-radius:15px;
        }
        .userTask{
            margin-top: 20px;
            width:400px ;
            height:250px;
            margin-left:40px;
        }

    </style>


<body>
<div class="app" id="app">
    <div style="display:flex">
        <div class="userInfo animate__backInUp animate__animated">
            <el-card class="box-card" style="width:100%;height:100%;">
                <el-form ref="form" :model="form" :data="form">
                    <div style="text-align:center;margin-top: 20px" >
                        <el-avatar shape="circle" :size="100" :fit="fit" :src="url"></el-avatar>
<%--                        <el-avatar :size="100" :fit="fit" :src="url"></el-avatar>--%>
                    </div>
                    <div>
                        <el-descriptions title="信息列表" :column="1" border>
                            <el-descriptions-item label="用户名" label-class-name="my-label" content-class-name="my-content">
                                {{form.username}}</el-descriptions-item>
                            <el-descriptions-item label="手机号">{{form.phone}}</el-descriptions-item>
                            <el-descriptions-item label="年龄">{{form.age}}</el-descriptions-item>
                            <el-descriptions-item label="VIP">
                                <el-tag size="large"  type=" primary">{{form.isVip}}</el-tag>
                            </el-descriptions-item>
                            <el-descriptions-item label="联系地址" :contentStyle="{'text-align': 'right'}">{{form.address}}</el-descriptions-item>
                        </el-descriptions>
                    </div>

                </el-form>
            </el-card>
        </div>
        <div class="userUpdate animate__backInUp animate__animated">
            <el-card class="box-card" style="width:100%;height:100%;">
                <div>
                    <el-alert title="用户信息修改" type="info" :closable="false" show-icon></el-alert>
                    <el-form  :model="form1" style="margin-top:20px">
                        <el-form-item label="用户名" :label-width="formLabelWidth">
                            <el-input v-model="form1.username" autocomplete="off" ></el-input>
                        </el-form-item>
                        <el-form-item label="密码" :label-width="formLabelWidth">
                            <el-input v-model="form1.password" autocomplete="off" type="password" ></el-input>
                        </el-form-item>
                        <el-form-item label="年龄" :label-width="formLabelWidth">
                            <el-input v-model="form1.age" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="手机号" :label-width="formLabelWidth">
                            <el-input v-model="form1.phone" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="地址" :label-width="formLabelWidth">
                            <el-input v-model="form1.address" autocomplete="off"></el-input>
                        </el-form-item>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <el-button @click="dialogFormVisible = false">取 消</el-button>
                        <el-button type="primary" @click="userInfoChange">更新信息</el-button>
                    </div>
                </div>
            </el-card>
        </div>
    </div>
    <div class="userTask animate__backInUp animate__animated" style="display: flex">
        <el-card class="box-card" style="width:100%;height:100%;">
            <el-form ref="form2" :model="form">
                <div>
                    <el-descriptions title="我的课程" :column="1" border>
                        <el-descriptions-item label="课程名" label-class-name="my-label" content-class-name="my-content">
                            {{form2.lesson_name}}</el-descriptions-item>
                        <el-descriptions-item label="教练名">{{form2.coach_name}}</el-descriptions-item>
                        <el-descriptions-item label="教练电话">{{form2.coach_phone}}</el-descriptions-item>
                    </el-descriptions>
                </div>

            </el-form>
        </el-card>
    </div>
</div>


<script src="${pageContext.request.contextPath}/statics/js/jquery.min.js"></script>
<script src="${pageContext.request.contextPath}/statics/js/jquery-3.6.0.js"></script>
<script src="${pageContext.request.contextPath}/statics/js/vue-2.6.12.js"></script>
<script src="${pageContext.request.contextPath}/statics/js/axios-0.20.0.js"></script>
<script src="${pageContext.request.contextPath}/statics/js/index.js"></script>
<script>


    new Vue({
        el: '#app',
        data:{
            fits: ['cover'],
            url:'https://reggie-zyz.oss-cn-beijing.aliyuncs.com/images/2022/03/2.jpg',
            form:{
                age:'',
                username: '',
                address: '',
                phone: '',
                isVip:''
            },
            form1:{
                age:'',
                username: '',
                address: '',
                phone: '',
                isVip:'',
                password:''
            },
            form2:{
                lesson_name: '',
                coach_phone: '',
                coach_name:''
            },
            formLabelWidth: '120px'
        },
        methods: {
            // 查询用户信息
            queryUserInfo(){
                axios.get("${pageContext.request.contextPath}/user/queryUserInfo").then(response =>{
                    if(response.data.code === 1){
                        this.form= response.data.data;
                        if (response.data.data.isVip===1){
                            this.form.isVip="YES"
                        }
                    }
                })
            },
            // 查询用户信息
            userInfoShow(){
                axios.get("${pageContext.request.contextPath}/user/queryUserInfo").then(response =>{
                    if(response.data.code === 1){
                        this.form1= response.data.data;
                    }
                })
            },
            // 查询用户课程
            taskQuery(){
                axios.get("${pageContext.request.contextPath}/user/queryUserTask").then(response =>{
                    if(response.data.code === 1){
                        this.form2= response.data.data;
                    }
                })
            },
            userInfoChange(){
                let params = {...this.form1}
                axios.post("${pageContext.request.contextPath}/user/updateUserInfo", params).then(response =>{
                    if(response.data.code === 1){
                        this.$notify({title: '成功', message: '修改完成！', type: 'success'});
                        this.queryUserInfo();
                    }
                })
            }
        },
        created() {
            this.queryUserInfo();
            this.taskQuery();
            this.userInfoShow();
        }
    })



</script>
</body>
</html>
